<template>
	<view>
		<!-- 酒店信息 S -->
		<view class="tp-bgf tp-pd30 level_align" v-if="pageName == 'hotel'">
			<image class="goods-img tp-mr20 tp-br12" :src="wwwImgUrl + info.imgSrc" mode=""></image>
			<view class="flex-1 flex flex_column flex_between tp-fz24" style="height: 142rpx;">
				<view class="ellispsis1 tp-fc333 tp-fz30 tp-fw600">
					{{info.name || ''}}
				</view>
				<view class="tp-fc666 ellispsis1">
					{{info.inTime || ''}} — {{info.outTime || ''}}
				</view>
				<view class="flex align_baseline tp-red">
					￥<text class="tp-fz36">{{info.applyForMoney || ''}}</text>
				</view>
			</view>
		</view>
		<!-- 酒店信息 E -->
		<!-- 旅游 定制 S -->
		<view class="tp-bgf tp-pd30 level_align" v-if="pageName == 'travel' || pageName == 'make' ">
			<image class="travel-img tp-mr20 tp-br12" :src="wwwImgUrl + info.imgSrc" mode=""></image>
			<view class="flex-1 flex flex_column flex_between tp-fz24" style="height: 120rpx;">
				<view class="ellispsis1 tp-fc333 tp-fz30 tp-fw600">
					{{info.name || ''}}
				</view>
				<view class="tp-fc666 ">
					<text class="tp-mr15">时间：</text>{{info.travelStart || ''}} — {{info.travelEnd || ''}}
				</view>
				<view class="flex align_baseline tp-red" v-if="info.price">
					{{info.price}}￥
				</view>
			</view>
		</view>
		<!-- 旅游 定制 E -->
		<!-- 景区 S -->
		<view class="tp-bgf tp-pd30 level_align" v-if="pageName == 'scenic'">
			<image class="scenic-img tp-mr20 tp-br12" :src="wwwImgUrl + info.imgSrc" mode=""></image>
			<view class="flex-1 flex flex_column flex_between tp-fz24" style="height: 142rpx;">
				<view class="ellispsis1 tp-fc333 tp-fz30 tp-fw600">
					{{info.name || ''}}
				</view>
				<view class="tp-fc666 ">
					<text class="tp-mr15">时间：</text>{{info.useTime || ''}}
				</view>
				<view class="flex align_baseline tp-fc666">
					<view class="ellispsis2">
						<text class="tp-mr10">{{info.ticketIntroVoList.length && info.ticketIntroVoList[0].ticketsName && info.ticketIntroVoList[0].ticketsName}} </text>
						<text class="" v-if="item.num != 0" v-for="(item,index) in info.ticketIntroVoList" :key='index'>{{item.skuName}}{{item.num}}张
							{{index !=  info.ticketIntroVoList.length - 1 ? '  ' : ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 景区 E -->
		<!-- 明细说明 S -->
		<view class="tp-mt20 tp-fc333 tp-fz30">
			<view class="tp-h88 level_align flex_between tp-ptb0lr30 tp-bgf tp-mb2">
				<text>申请金额</text>
				<text>￥{{info.applyForMoney || ''}}</text>
			</view>
			<view class="tp-h88 level_align flex_between tp-ptb0lr30 tp-bgf tp-mb2">
				<text>手续费</text>
				<text>-￥{{form.deduct}}</text>
			</view>
			<view class="tp-h88 level_align flex_between tp-ptb0lr30 tp-bgf tp-mb2">
				<text>退款金额</text>
				<text class="tp-red">￥{{info.applyForMoney - form.deduct}}</text>
			</view>
			<view class="level_align tp-ptb0lr30 flex_between tp-bgf tp-mb2 tp-h88" @click="selectCause">
				<text class="tp-fz30 tp-mr30">退款原因</text>
				<view class="level_align flex-1 flex_end">
					<input class="tp-tr tp-ptb0lr20 tp-bbox" type="text" :value="form.cancelCause" disabled placeholder="请选择" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view class="tp-h88 level_align flex_between tp-ptb0lr30 tp-bgf">
				<text>申请说明</text>
			</view>
			<view class="tp-ptb0lr30 tp-bgf tp-pb30 tp-mb2">
				<view class="tp-pd30 tp-bcF5 tp-br12">
					<textarea value="" placeholder="请输入申请说明" v-model="form.refundApplyDesc" />
					<view class="tp-mt20 tp-w690 level_align flex_wrap">
						<view class="up-img tp-mb20 tp-pr" v-for="(item, index) in list" :index="index" :key="index" :style="{marginRight:(index+1)%4 == 0 ?'0':'10rpx'}">
							<image class="tp-br8" :src="item" mode="aspectFill" @click="previewImg(item)"></image>
							<image @click.stop="delThisImg(index)" class="close-icon-img" src="../static/imgs/icons/close4.png" mode=""></image>
						</view>
						<view v-if="list && list.length < 4" @click="handleUploadIDImgPositive" class="up-img tp-mb20">
							<image class="up-img" src="static/upimg1.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="level_align flex_between tp-ptb0lr30 tp-bgf  tp-h88">
				<text class="tp-fz30 tp-mr30">联系电话：</text>
				<view class="level_align flex-1 flex_end">
					<input type="number" class="tp-tr" maxlength="11" placeholder="请填写联系电话" v-model="info.refundPhone" />
				</view>
			</view>
		</view>
		<!-- 明细说明 E -->
		
		<view class="tp-pd30">
			<view @click="handeSubmitRefundDect" class="btn tp-bc tp-fcF tp-fz30 tp-h88  center_combo">
				提交申请
			</view>
		</view>
		<view class="tp-h98"></view>
		
		
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				pageName: 'hotel', // hotel 酒店  scenic 景区  travel 旅游
				info: {}, // 订单数据
				list: [], // 页面显示上传的图片
				uplist: [], // 要上传的图片数组
				form: {
					cancelCause: '', // 原因文字
					refundApplyImg: '' ,// // 图片字段拼接字符串,
					refundApplyDesc: '', //  退款申请文字说明
					deduct: 0, // 取消需要付费
				},
				RefundDectList: [], // 退款原因
			};
		},
		onLoad(opt) {
			this.pageName = opt.pageName
			this.info = opt.info && JSON.parse(opt.info)
			if(this.pageName == 'make'){
				this.getPageInfo()
			}
			this.RefundDect()
			this.getDictData()
		},
		methods:{
			// 获取定制行程安排详情
			getPageInfo() {
				this.$http.get(this.$api.customizedInfoDesc + '?orderId=' + this.info.orderId).then(res => {
					if (res.code === 200) {
						let obj = {
							name : res.data.travelName,
							imgSrc: res.data.travelCover
						}
						this.info = Object.assign(obj,this.info)
					}
				})
			},
			// 提交退款
			handeSubmitRefundDect(){
				let {
					orderId,
					orderNo,
					refundPhone
				} = this.info
				let {
					deduct,
					cancelCause,
					refundApplyDesc,
					refundApplyImg
				} = this.form
				if(!cancelCause)return uni.showToast({
					title: '请选择退款原因',
					icon: 'none'
				})
				if(!refundApplyDesc)return uni.showToast({
					title: '请填写申请说明',
					icon: 'none'
				})
				if(!refundApplyImg)return uni.showToast({
					title: '请上传申请图片',
					icon: 'none'
				})
				if(!refundPhone)return uni.showToast({
					title: '请填写手机号',
					icon: 'none'
				})
				if(!this.$regexPhone.test(refundPhone))return uni.showToast({
					title: '请检查手机号是否正确',
					icon: 'none'
				})
				let url = ''
				if(this.pageName == 'hotel'){
					url = this.$api.hotelRefundApply + '?orderId=' + orderId
				}else if(this.pageName == 'scenic'){
					url = this.$api.scenicRefundApply + '?orderId=' + orderId
				}else if(this.pageName == 'travel'){
					url = this.$api.travelGroupRefundApply + '?orderId=' + orderId
				}else if(this.pageName == 'make'){
					url = this.$api.makeRefundApply + '?orderId=' + orderId
				}
				this.$http.post(url, {
					orderId,orderNo,deduct,cancelCause,refundApplyDesc,refundApplyImg,refundPhone
					})
					.then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '申请成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
								    url: './refundSchedule?pageName='+this.pageName+'&orderId=' + orderId
								});
							},600)
						}
					})
			},
			// 申请退款 退款手续费计算
			RefundDect(){
				let url = ''
				if(this.pageName == 'hotel'){
					url = this.$api.hotelRefundDect + '?orderId=' + this.info.orderId
				}else if(this.pageName == 'scenic'){
					url = this.$api.scenicRefundDect + '?orderId=' + this.info.orderId
				}else if(this.pageName == 'travel'){
					url = this.$api.travelGroupRefundDect + '?orderId=' + this.info.orderId
				}else if(this.pageName == 'make'){
					url = this.$api.makeRefundDect + '?orderId=' + this.info.orderId
				}
				this.$http.get(url).then(res => {
					if (res.code === 200) {
						this.form.deduct = res.data.fee
					}
				})
			},
			// 各种下拉选项设置106.酒店退款原因
			getDictData() {
				let type = ''
				if(this.pageName == 'hotel'){
					type = '106'   // 106.酒店退款原因
				}else if(this.pageName == 'scenic'){
					type = '204'    // 204:景区退票原因
				} else if(this.pageName == 'travel'){
					type = '503'    // 503:跟团游退款原因
				} else if(this.pageName == 'make'){
					type = '508'    // 508: 定制游退款原因
				}
				this.$http.get(this.$api.dictData + '?type=' + type).then(res => {
					if (res.code === 200) {
						this.RefundDectList = res.data
					}
				})
			},
			// 选择退款原因
			selectCause(){
				let _this = this
				let arr = []
				_this.RefundDectList.forEach(item => {
					arr.push(item.value)
				})
				console.log(arr);
				uni.showActionSheet({
					itemList:arr,
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						_this.form.cancelCause = _this.RefundDectList[res.tapIndex].value
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 上传图片
			handleUploadIDImgPositive() {
				const _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '],
					success: ({tempFilePaths}) => {
						uni.uploadFile({
							url: _this.$baseUrl + _this.$api.uploadFile,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let uploadData = JSON.parse(uploadFileRes.data)
								let str = this.$imgUrl + uploadData.url
								_this.list.push(str)
								_this.uplist.push(uploadData.url)
								 _this.form.refundApplyImg = _this.uplist.join(',')
								// _this.$set(this.updata, key, uploadData.url)
							}
						})
					}
				});
			},
			// 删除这个图片
			delThisImg(index){
				this.list.splice(index,1)
				this.uplist.splice(index,1)
				this.form.refundApplyImg = this.uplist.join(',')
			},
			// 预览图片
			previewImg(url) {
				console.log(url);
				uni.previewImage({
					current: url,
					urls: this.list,
					success: function(){
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.goods-img{
	width: 168rpx;
	height: 142rpx;
}
.travel-img{
	width: 200rpx;
	height: 120rpx;
}
.scenic-img{
	width: 190rpx;
	height: 142rpx;
}
.close-icon-img {
		position: absolute;
		top: -14rpx;
		right: -8rpx;
		width: 28rpx;
		height: 28rpx;
			
		}
.up-img{
	width: 150rpx;
	height: 150rpx;
	border-radius: 4rpx;
}
.btn{
	border-radius: 44rpx;	
	background: linear-gradient(90deg, #00B4FF, #10DAFF);
}
</style>
